<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				border: 1px solid black;
				width: 500px;
				margin: 100px auto;
				/*text-align: center;*/
			}
			.wrap{
				width: 80%;
				margin: 0 auto;
			}
			input{
				width: 200px;
				height: 30px;
				line-height: 30px;
				margin: 15px 0;
				border: 1px solid black;
				text-indent: 5px;
			}
			span{
				display:inline-block;
				width: 100px;
				font-weight: bold;
			}
			a{
				display: block;
				width: 200px;
				height: 50px;
				line-height: 50px;
				background: orange;
				text-align: center;
				text-decoration: none;
				color: white;
				font-weight: bold;
				margin-left: 50%;
				transform: translateX(-50%);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="wrap">
			<p><span>用户名：</span><input class="uname" type="text" /></p>
			<p><span>密码：</span><input class="pwd" type="text" /></p>
			<p><span>确认密码：</span><input class="pwdnice" type="text"/></p>
			<a href="#" class="btn">注册</a>
			</div>
			
		</div>
	</body>
	<script type="text/javascript" src="../jquery-1.10.1.min.js"></script>
    <script>
    	$('.btn').click(function(){
    		var uname = $(".uname").val();
    		var pwd = $(".pwd").val();
    		var pwdnice =$(".pwdnice").val();
    		
    		if(uname&&pwd&&pwdnice){
    			if(pwd==pwdnice){
    					// 实现注册功能
				// [{'id':1,'uname':'小明','pwd':'123'},{'id':2,'uname':"小红",'pwd':'456'}]
				// 先获取localStorage中的users
				//var res = localStorage.getItem('users');
				var res  = localStorage.getItem("users");
				
				if(res){
					res = JSON.parse(res);
					var obj ={
						'id':parseInt(res[res.length-1]['id'])+1,
						'uname':uname,
						'pwd':pwd
					}
					res.push(obj);
					localStorage.setItem('users',JSON.stringify(res));
				}else{
					// 说明localStorage中没有users这个键，这时需要创建
					var arr =[{
						'id':1,
						'uname':uname,
						'pwd':pwd
					}];
					// 存储到本地
					localStorage.setItem('users',JSON.stringify(arr));
				}
			    //跳转网页
			    window.location.href='login.html';
			
    			}else{
    				console.log("两次密码一致")
    			}
    		}else{
    			console.log("用户名或者密码不能为空");
    		}
    		
    	})
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	/*
    	 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * 
    	 * */
    </script>
</html>
